<template>
	<!-- 工作任务 -->
	<view class="myplay-container">
		<view class="building-top">
			<view class="top-search"><u-search placeholder="搜索" shape="square" v-model="keyword"></u-search></view>
			<view class="tabclass"><u-tabs :list="TabsList" :is-scroll="false" :current="current" @change="change"></u-tabs></view>
		</view>
		<view class="play-content">
			<view class="play-item" v-for="(item,index) in playList" :key="index" @click="handlePlayInfo">
				<view class="item-top">
					<view class="top-left">{{ item.title }}</view>
					<view class="top-right">{{ item.type }}</view>
				</view>
				<view class="item-mid">{{ item.name }}</view>
				<view class="item-bottom">{{ item.time }}</view>
			</view>
		</view>
		
		<u-loadmore :status="status" icon-color="#007AFF" />
	</view>
</template>

<script>
	export default{
		data() {
			return{
				type:'全部',
				show:false,
				TabsList:[
					{
						name: '全部'
					},
					{
						name: '我上报'
					},
					{
						name: '待处理'
					},
					{
						name: '已处理'
					},
					{
						name: '已完结'
					}
				],
				keyword:'',
				current: 0,
				playList:[
					// {
					// 	title:'走访村民',
					// 	type:'正在进行',
					// 	name:'管理员',
					// 	time:'2020-12-09 20:00:00'
					// }
				],
				pageNo:1,
				pageSize:10,
				status: 'loading',
				tolnum:0,
			}
		},
		mounted() {
			this.myTask()
		},
		// 上拉
		onReachBottom() {
			this.pageNo = this.pageNo + 1
			if(this.pageNo > this.tolnum) {
				return this.status = 'nomore'
			}
			this.myTask() // 获取数据
		},
		// 下拉
		onPullDownRefresh() {
			this.playList=[] // 清空
			this.pageNo = 1;
			this.current = 0
			this.status = 'loading'
			this.myTask() // 获取数据
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1500);
		},
		methods:{
			onNavigationBarButtonTap() {
			    uni.navigateTo({
			    	url:'../MyPlay-add/MyPlay-add'
			    })
			},
			change(index) {
				this.current = index
				this.myTask()
			},
			// confirm(e) {
			// 	console.log(e)
			// 	this.type = e[0].label
			// },
			// handlePlayInfo() {
			// 	uni.navigateTo({
			// 		url:'../MyPlayInfo/MyPlayInfo'
			// 	})
			// },
			myTask() {
				let params = {
					type:this.current,
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}
				this.$u.api.myTask(params)
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							this.tolnum = res.result.pages
							if (res.result.pages == 0) {
								this.status = 'nomore'
							}
							res.result.records.forEach(item => {
								
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss"  scoped>
	.myplay-container{
		background-color: #f5f6f7;
		min-height: 100vh;
		.building-top{
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 240rpx;
			box-shadow: 3px 3px 3px #eee;
			padding: 20rpx;
			.top-2{
				color: #007AFF;
				font-size: 25rpx;
				margin-top: 30rpx;
				border-bottom: 1px solid #f4f1f1;
				text{
					color: #000;
					display: inline-block;
					margin-right: 10rpx;
				}
			}
			.tabclass{
				margin-bottom: 20rpx;
			}
		}
		.play-content{
			padding: 260rpx 20rpx 20rpx 20rpx;
			.play-item{
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-around;
				align-items: flex-start;
				flex-direction: column;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				.item-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					.top-left{
						color: #333;
						font-size: 30rpx;
					}
					.top-right{
						color: #007AFF;
						font-size: 24rpx;
					}
				}
				.item-mid{
					color: #999;
					font-size: 26rpx;
				}
				.item-bottom{
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
